<template>
  <a-modal :zIndex="2000" :title="title" style="top: 100px;" :visible.sync="isShow" width="1100px" @ok="handleSubmit"
    @cancel="handleCancel">
    <div>
      <div class="content-head" style="margin-bottom: 20px;">
        <div class="sort-keys">
          <a-input placeholder="搜索标题/编号" style="width: 180px;margin-right:10px;" v-model="key" allowClear/>
          <a-button type="primary" @click="refreshData" style="margin-right:10px;">刷新</a-button>

         <a-radio-group v-model="type" buttonStyle="solid" style="margin-right:10px;">
           <a-radio-button value="all">全部({{total}})</a-radio-button>
           <a-radio-button value="selected">已选({{ids.length}})</a-radio-button>
         </a-radio-group>

        </div>
      </div>
      <!-- {{ids}} -->
      <a-table class="table" :row-selection="selection" borded :rowKey="row => row.id" :dataSource="list"
        :pagination="pagination" size="small">
        <a-table-column title="封面" width="80px">
          <template slot-scope="row">
            <img class="thumb" :src="row.thumb">
          </template>
        </a-table-column>
        <a-table-column title="上下架" width="40px">
          <template slot-scope="row">
            <a-tag color="red" size="small" v-if="row.status == 0">已下架</a-tag>
            <a-tag color="blue" size="small" v-if="row.status == 1">上架中</a-tag>
          </template>
        </a-table-column>
        <!-- <a-table-column title="编号" width="110px">
          <template slot-scope="row">
            <div>{{row.number}}</div>
          </template>
        </a-table-column> -->
        <a-table-column title="标题" width="300px">
          <template slot-scope="row">
            <div>{{row.title}}</div>
          </template>
        </a-table-column>
        <a-table-column title="售价" width="150px">
          <template slot-scope="row">
            <PriceDisplay :info="row"></PriceDisplay>
          </template>
        </a-table-column>
        <a-table-column title="数量" width="160px">
          <template slot-scope="row">
            <a-input prefix="" suffix="个" v-model="row.number"/>
          </template>
        </a-table-column>
        <a-table-column title="创建时间" width="200px">
          <template slot-scope="row">
            <span>{{row.created_at}}</span>
          </template>
        </a-table-column>
      </a-table>
      <div>已选: {{ids.length}} 项</div>
    </div>
  </a-modal>
</template>

<script>
import { watch } from 'less'

  const resourceType = 'order/packageSku'

  export default {
    name: 'product',
    components: {},
    props: {
      initIds: {
        type: Array,
        default:()=>{
          return []
        }
      },
      mode: {
        type: String,
        default () {
          return 'radio'
        }
      },
      replaceRow:{
        type:Object,
        default:()=>{
          return {}
        }
      }
    },
    data() {
      return {
        title: '选择商品',
        key: '',
        list: [],
        ids: [],
        per_page: 10,
        page: 1,
        total: 0,
        type: 'all',
        isShow:true,
        currentRow:{}
      }
    },
    computed: {
      selection() {
        return {
          type: this.mode,
          selectedRowKeys: this.ids,
          onChange: (ids,row) => {
            this.ids = ids
            this.currentRow=row?.[0]
          }
        }
      },
      pagination() {
        return {
          defaultPageSize: this.per_page,
          defaultCurrent: this.page,
          total: this.total,
          onChange: (e) => {
            console.log(e)
            this.page = e
            // this.per_page = e.pageSize
            this.fetchData()
          }
        }
      }
    },
    mounted() {
      this.ids = this.initIds
      this.fetchData()
    },
    watch: {
      type () {
        this.page = 1
        this.fetchData()
      }
    },
    methods: {
      refreshData () {
        this.page = 1
        this.fetchData()
      },
      handleSubmit() {
        if(this.ids.length===0){
          this.$message.warning('请选择准备替换的卡片')
          return
        }
        this.$emit('change', {replaceId:this.replaceRow.xq_id,id: this.currentRow.id,number:this.currentRow.number,orderId:this.replaceRow.orderId,skuId:this.replaceRow.sku_id})
        this.$emit('close')
      },
      handleCancel() {
        this.$emit('close')
      },
      fetchData() {
        this.$http.get(`/${resourceType}`, {
          params: {
            page: this.page,
            per_page: this.per_page,
            titles: this.key,
            // ids: this.type == 'all' ? [] : this.ids
          }
        }).then(res => {
          this.list = res.data.list
          for(let i=0;i<this.list.length;i++){
            this.list[i].number=this.replaceRow.xq_num;
          }
          this.total = res.data.item_total
        }).finally(() => {
          this.loading = false
        })
      },
    }
  }
</script>
<style lang="scss" scoped>
  .table {

    .thumb {
      width: 40px;
      height: 40px;
      object-fit: contain;
    }

    .right {
      margin-left: 10px;
    }

    .title {
      // min-height: 30px;
      min-width: 100px;
      font-weight: 500;
    }

  }
</style>
